<template>
    <el-dialog
        :title="!dataForm.id ? '新增' : '修改'"
        :close-on-click-modal='false'
        :visible.sync='visible'>
        <el-form :model='dataForm' :rules='dataRule' ref='dataForm'
                 label-width='80px'>
            <el-form-item label='头像' prop='avatar'>
                <el-upload
                    class='avatar-uploader'
                    :action='fileUrl'
                    :show-file-list='false'
                    :on-success='handleAvatarSuccess'>
                    <img v-if='dataForm.avatar' :src='dataForm.avatar' class='avatar'>
                    <i v-else class='el-icon-plus avatar-uploader-icon'></i>
                </el-upload>
            </el-form-item>
            <el-form-item label='姓名' prop='teacherName'>
                <el-input v-model='dataForm.teacherName'></el-input>
            </el-form-item>
            <el-form-item label='研究方向'>
                <el-tag
                    :key='tag'
                    v-for='tag in dynamicTags'
                    closable
                    :disable-transitions='false'
                    @close='handleClose(tag)'>
                    {{ tag }}
                </el-tag>
                <el-input
                    class='input-new-tag'
                    v-if='inputVisible'
                    v-model='inputValue'
                    ref='saveTagInput'
                    size='small'
                    @keyup.enter.native='handleInputConfirm'
                    @blur='handleInputConfirm'
                >
                </el-input>
                <el-button v-else class='button-new-tag' size='small' @click='showInput'>+ 添加</el-button>
            </el-form-item>
            <el-form-item label='描述' prop='description'>
                <el-input type='textarea'
                          :autosize='{ minRows: 2, maxRows: 4}'
                          v-model='dataForm.description' placeholder='不超过500字符'></el-input>
            </el-form-item>
        </el-form>
        <span slot='footer' class='dialog-footer'>
      <el-button @click='visible = false'>取消</el-button>
      <el-button type='primary' @click='dataFormSubmit()'>确定</el-button>
    </span>
    </el-dialog>
</template>

<script>
import apis from '@/api/apis';
import constVal from '@/api/const';

export default {
    data() {
        return {
            visible: false,
            fileUrl: '',
            dataForm: {
                id: 0,
                teacherName: '',
                avatar: '',
                researchDire: '',
                description: ''
            },
            dataRule: {
                avatar: [
                    { required: true, message: '姓名不能为空', trigger: 'blur' }
                ],
                teacherName: [
                    { required: true, message: '姓名不能为空', trigger: 'blur' }
                ],
                description: [
                    { required: true, message: '描述不能为空', trigger: 'blur' }
                ]
            },
            dynamicTags: [],
            inputVisible: false,
            inputValue: ''
        };
    },

    created() {
        this.fileUrl = constVal.FileUploadInterface();
    },
    methods: {
        handleAvatarSuccess(res, file) {
            this.dataForm.avatar = res.url;
        },
        init(id) {
            this.dataForm.id = id || 0;
            this.visible = true;
            this.$nextTick(() => {
                this.$refs['dataForm'].resetFields();
                if (this.dataForm.id) {
                    apis.getTeacherInfoById(this.dataForm.id).then(data => {
                        if (data && data.code === 0) {
                            this.dataForm.teacherName = data.teacherInfo.teacherName;
                            this.dataForm.avatar = data.teacherInfo.avatar;
                            this.dataForm.description = data.teacherInfo.description;
                            this.dynamicTags = JSON.parse(data.teacherInfo.researchDire);
                        }
                    });
                }
            });
        },
        handleClose(tag) {
            this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
        },

        showInput() {
            this.inputVisible = true;
            this.$nextTick(_ => {
                this.$refs.saveTagInput.$refs.input.focus();
            });
        },

        handleInputConfirm() {
            let inputValue = this.inputValue;
            if (inputValue) {
                this.dynamicTags.push(inputValue);
            }
            this.inputVisible = false;
            this.inputValue = '';
        },
        // 表单提交
        dataFormSubmit() {
            this.$refs['dataForm'].validate((valid) => {
                if (valid) {
                    let params = {
                        'id': this.dataForm.id || undefined,
                        'teacherName': this.dataForm.teacherName,
                        'avatar': this.dataForm.avatar,
                        'description': this.dataForm.description,
                        'researchDire': JSON.stringify(this.dynamicTags)
                    };
                    apis.saveTeacherInfo(params).then(res => {
                        if (res && res.code === 0) {
                            this.$message({
                                message: '操作成功',
                                type: 'success',
                                duration: 1500,
                                onClose: () => {
                                    this.visible = false;
                                    this.$emit('refreshDataList');
                                }
                            });
                            this.dynamicTags =[]
                        } else {
                            this.$message.error(res.msg);
                        }
                    });
                }
            });
        }
    }
};
</script>

<style>
.el-tag + .el-tag {
    margin-left: 10px;
}

.button-new-tag {
    margin-left: 10px;
    height: 25px;
    padding-top: 0;
    padding-bottom: 0;
}

.input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 80px;
    height: 80px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 80px;
    height: 80px;
    display: block;
    border-radius: 50%;
}
</style>
